<template>
  <van-popup
    v-model="indicatorUseShow"
    @click-overlay="overlay"
    :close-on-click-overlay="false"
    class="popupcontent"
    position="bottom"
  >
    <div class="testh">
      <div class="pophead">
        <span>指标使用说明</span>
        <span @click.stop="overlay" class="guanbi icon icon-guanbi"></span>
      </div>
      <div id="popupcontentid" v-if="queryDescriptiondata">
        <van-tabs v-if="queryDescriptiondata.targetlist.length > 1" v-model="activeName">
          <van-tab
            v-for="(item, i) in queryDescriptiondata.targetlist"
            :key="i"
            :title="item.targetBigName"
            class="van-tab-color"
          >
          </van-tab>
          <van-tab disabled :key="'checknum_' + n" v-for="n in 6 - checknum"> </van-tab>
        </van-tabs>
        <div class="content-box">
          <div v-if="queryDescriptiondata.targetlist[activeName].targetBigName" class="text">
            <p class="name">{{ queryDescriptiondata.targetlist[activeName].targetBigName }}</p>
            <p class="textline">{{ queryDescriptiondata.targetlist[activeName].targetSmallName }}</p>
          </div>
          <div class="text" v-if="queryDescriptiondata.targetlist[activeName].targetClassification">
            <p class="texthead">指标分类</p>
            <p>{{ queryDescriptiondata.targetlist[activeName].targetClassification }}</p>
          </div>
          <div class="text" v-if="queryDescriptiondata.targetlist[activeName].targetInstructions">
            <p class="texthead">指标说明</p>
            <p>{{ queryDescriptiondata.targetlist[activeName].targetInstructions }}</p>
          </div>
          <div class="text" v-if="queryDescriptiondata.targetlist[activeName].targetCalculate">
            <p class="texthead">计算公式</p>
            <p>{{ queryDescriptiondata.targetlist[activeName].targetCalculate }}</p>
          </div>
          <div
            v-if="
              queryDescriptiondata.targetlist[activeName].targetFrequency ||
                queryDescriptiondata.targetlist[activeName].targetUnit ||
                queryDescriptiondata.targetlist[activeName].targetDepartments
            "
            class="text"
          >
            <p class="texthead">基础信息</p>
            <p v-if="queryDescriptiondata.targetlist[activeName].targetFrequency">
              <span>更新频率：{{ queryDescriptiondata.targetlist[activeName].targetFrequency }}</span>
            </p>
            <p v-if="queryDescriptiondata.targetlist[activeName].targetUnit">
              <span>单&#8195;&#8195;位：{{ queryDescriptiondata.targetlist[activeName].targetUnit }}</span>
            </p>
            <p v-if="queryDescriptiondata.targetlist[activeName].targetDepartments">
              <span>所属部门：{{ queryDescriptiondata.targetlist[activeName].targetDepartments }}</span>
            </p>
          </div>
          <div
            v-if="
              queryDescriptiondata.targetlist[activeName] &&
                queryDescriptiondata.targetlist[activeName].targetDimension &&
                queryDescriptiondata.targetlist[activeName].targetDimension.split('|').length
            "
            class="text"
          >
            <p class="texthead">分析维度</p>
            <div>
              <span
                v-for="v in queryDescriptiondata.targetlist[activeName].targetDimension.split('|')"
                class="listbtn"
                :key="v"
              >
                {{ v }}
              </span>
            </div>
          </div>
          <div
            v-if="
              queryDescriptiondata.targetlist[activeName] &&
                queryDescriptiondata.targetlist[activeName].targetIndicators &&
                queryDescriptiondata.targetlist[activeName].targetIndicators.split('|').length
            "
            class="text"
          >
            <p class="texthead">关联指标</p>
            <div>
              <span
                v-for="v in queryDescriptiondata.targetlist[activeName].targetIndicators.split('|')"
                class="listbtn"
                :key="v"
              >
                {{ v }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0
    }
  },
  props: ['indicatorUseShow', 'groupid', 'queryDescriptionvalue'],
  computed: {
    checknum() {
      const n = 6 - this.queryDescriptionvalue.length
      return n > 0 ? n : 0
    },
    queryDescriptiondata() {
      return this.queryDescriptionvalue.find(m => m.targetGroupId === this.groupid)
    }
  },
  methods: {
    overlay() {
      this.activeName = 0
      this.$emit('update:indicatorUseShow', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.popupcontent {
  width: 100%;
  height: 80%;
  background-color: $light-bc;
  border-radius: 20px 20px 0px 0px;
  box-sizing: border-box;
  padding: 10px 20px 20px;
  .testh {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .pophead {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      position: relative;
      .guanbi {
        position: absolute;
        top: 0;
        right: 0;
        box-sizing: border-box;
        font-size: 20px;
        padding: 0 0 0 10px;
      }
    }
    .content-box {
      height: 100%;
      // height: calc(100% - 60px);
      padding-bottom: 10px;
      overflow: auto;
      .text {
        line-height: 20px;
        padding-top: 10px;
        color: #d3d4da;
        p {
          padding: 0;
          margin: 0;
          font-size: 14px;
          &.name {
            font-size: 20px;
            color: #fff;
            padding: 20px 0 10px;
          }
          &.texthead {
            font-size: 16px;
            padding: 14px 0 6px;
            color: #fff;
          }
        }
      }
      .listbtn {
        display: inline-block;
        padding: 4px;
        margin-right: 6px;
        background: rgba(233, 233, 237, 0.16);
      }
    }
    #popupcontentid {
      height: calc(100% - 60px);
      /deep/.van-tabs {
        padding-top: 10px;
        .van-tabs__content {
          background-color: $light-bc;
        }
        .van-tab__pane-wrapper {
          background-color: $light-bc;
        }
      }

      /deep/.van-tabs .van-tabs__wrap .van-tabs__nav .van-tab {
        color: #cdcdcd;
        text-align: left;
        display: flex;
        align-self: baseline;
        span {
          padding-bottom: 10px;
          font-size: 14px;
        }
        &.van-tab--active {
          color: #fff;
          span {
            position: relative;
            font-weight: bold;
            &::after {
              content: '';
              height: 3px;
              width: 100%;
              background-color: $main-blue;
              position: absolute;
              bottom: 0;
              left: 0;
              border-radius: 2px;
            }
          }
        }
      }
      // /deep/.van-tab__text--ellipsis {
      //   display: box;
      // }
      /deep/.van-tabs .van-tabs__wrap {
        padding-right: 0;
        height: 30px;
      }
      /deep/.van-tabs .van-tabs__wrap .van-tabs__nav {
        background-color: $light-bc;
        font-size: 14px;
        font-weight: 500;
      }
      /deep/.van-tabs .van-tabs__wrap .van-tabs__nav .van-tab {
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        margin-right: 16px;
        border-bottom: 3px solid transparent;
      }
      /deep/.van-tabs .van-tabs__wrap .van-tabs__nav .van-tabs__line {
        display: none;
      }
      /deep/.van-tabs .van-tabs__content {
        background-color: $light-bc;
        // height: 100%;
        .van-tab__pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
